<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>


			<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->

			<div id="portlet-config" class="modal hide">

				<div class="modal-header">

					<button data-dismiss="modal" class="close" type="button"></button>

					<h3>portlet Settings</h3>

				</div>

				<div class="modal-body">

					<p>Here will be a configuration form</p>

				</div>

			</div>

			<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->

			<!-- BEGIN PAGE CONTAINER-->

			<div class="container-fluid">

				<!-- BEGIN PAGE HEADER-->   

				<div class="row-fluid">

					<div class="span12">

						<!-- BEGIN STYLE CUSTOMIZER -->

						<div class="color-panel hidden-phone">

							<div class="color-mode-icons icon-color"></div>

							<div class="color-mode-icons icon-color-close"></div>

							<div class="color-mode">

								<p>THEME COLOR</p>

								<ul class="inline">

									<li class="color-black current color-default" data-style="default"></li>

									<li class="color-blue" data-style="blue"></li>

									<li class="color-brown" data-style="brown"></li>

									<li class="color-purple" data-style="purple"></li>

									<li class="color-grey" data-style="grey"></li>

									<li class="color-white color-light" data-style="light"></li>

								</ul>

								<label>

									<span>Layout</span>

									<select class="layout-option m-wrap small">

										<option value="fluid" selected>Fluid</option>

										<option value="boxed">Boxed</option>

									</select>

								</label>

								<label>

									<span>Header</span>

									<select class="header-option m-wrap small">

										<option value="fixed" selected>Fixed</option>

										<option value="default">Default</option>

									</select>

								</label>

								<label>

									<span>Sidebar</span>

									<select class="sidebar-option m-wrap small">

										<option value="fixed">Fixed</option>

										<option value="default" selected>Default</option>

									</select>

								</label>

								<label>

									<span>Footer</span>

									<select class="footer-option m-wrap small">

										<option value="fixed">Fixed</option>

										<option value="default" selected>Default</option>

									</select>

								</label>

							</div>

						</div>

						<!-- END BEGIN STYLE CUSTOMIZER -->     

						<h3 class="page-title">

							Form Validation

							 <small>form validation states</small>

						</h3>

						<ul class="breadcrumb">

							<li>

								<i class="icon-home"></i>

								<a href="index.html">Home</a> 

								<span class="icon-angle-right"></span>

							</li>

							<li>

								<a href="#">Form Stuff</a>

								<span class="icon-angle-right"></span>

							</li>

							<li><a href="#">Form Validation</a></li>

						</ul>

					</div>

				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->

				
				<div class="row-fluid">

					<div class="span12">

						<!-- BEGIN VALIDATION STATES-->

						<div class="portlet box green">

							<div class="portlet-title">

								<div class="caption"><i class="icon-reorder"></i>Advance Validation</div>

								<div class="tools">

									<a href="javascript:;" class="collapse"></a>

									<a href="#portlet-config" data-toggle="modal" class="config"></a>

									<a href="javascript:;" class="reload"></a>

									<a href="javascript:;" class="remove"></a>

								</div>

							</div>

							<div class="portlet-body form">

								<!-- BEGIN FORM-->

								<h3>Advance validation of custom radio buttons, checkboxes and chosen dropdowns</h3>

								<sf:form action="#" id="form_sample_2" class="form-horizontal" modelAttribute="userDto">

									<div class="alert alert-error hide">

										<button class="close" data-dismiss="alert"></button>

										You have some form errors. Please check below.

									</div>

									<div class="alert alert-success hide">

										<button class="close" data-dismiss="alert"></button>

										Your form validation is successful!

									</div>

									<div class="control-group">

										<label class="control-label">用户名称<span class="required">*</span></label>

										<div class="controls">

											<sf:input class="span6 m-wrap" path="username" />
											<sf:errors cssClass="errorContainer" path="username"/>

										</div>

									</div>
									
									<div class="control-group">

										<label class="control-label">用户密码<span class="required">*</span></label>

										<div class="controls">

											<sf:input class="span6 m-wrap" path="password" />
											<sf:errors cssClass="errorContainer" path="password"/>

										</div>

									</div>
									
									<div class="control-group">

										<label class="control-label">确认密码<span class="required">*</span></label>

										<div class="controls">

											<input type="password" class="span6 m-wrap" id="confirmPwd" name="confirmPwd"/>
										</div>

									</div>
									
									<div class="control-group">

										<label class="control-label">联系电话<span class="required">*</span></label>

										<div class="controls">

											<sf:input class="span6 m-wrap" path="phone"  />
											
										</div>

									</div>

									<div class="control-group">

										<label class="control-label">电子邮件<span class="required">*</span></label>

										<div class="controls">

											<sf:input class="span6 m-wrap" path="email"  /><sf:errors path="email"/>

										</div>

									</div>
									
									<div class="control-group">

										<label class="control-label">微信</label>

										<div class="controls">

											<sf:input class="span6 m-wrap" path="weixin"  />

										</div>

									</div>
									
									<div class="control-group">

										<label class="control-label">角色<span class="required">*</span></label>

										<div class="controls">

											<sf:checkboxes items= "${roles }" itemLabel="name" itemValue="id" path="roleIds"/>

										</div>

									</div>
									
									<div class="control-group">

										<label class="control-label">用户组<span class="required">*</span></label>

										<div class="controls">

											<sf:checkboxes items= "${groups }" itemLabel="name" itemValue="id" path="groupIds"/>

										</div>

									</div>

									<div class="form-actions">

										<button type="submit" class="btn green">提交</button>

										<button type="reset" class="btn">重置</button>

									</div>

								</sf:form>

								<!-- END FORM-->

							</div>

						</div>

						<!-- END VALIDATION STATES-->

					</div>

				</div>

				<!-- END PAGE CONTENT-->         

			</div>

			<!-- END PAGE CONTAINER-->


		<!-- END PAGE -->  
		
		<script>
		jQuery(document).ready(function() {  
			
			$("#form_sample_2").cmsvalidate();
		});
		
		</script>
		
		
		
		